<template>
	<view class="complaint">

		<view class="od-line3">
			<view class="content-line2">
				<view class="line1-text1">
					<image :src="orderInfo.pro_img" mode=""></image>
				</view>
				<view class="line1-text2 font28">
					<view class="content-line1">
						<image :src="orderInfo.shop_img" mode="aspectFill" class="order-icon"></image>
						<text class="line1-text2 font30">{{orderInfo.shop_name}}</text>
						<text class="iconfont">&#xe600;</text>
					</view>
					<view class="content-title">
						{{orderInfo.pro_name}}
					</view>
					<view class="price">
						<text class="font30">
							￥{{orderInfo.pro_price}}
						</text>
						</br>
						<text class="font24">
							×{{orderInfo.pro_pronum}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 问题说明 -->
		<view class="cp-question">
			<view class="qt-line1">
				投诉商家问题说明：
			</view>
			<textarea v-model="questionText" @input="changeText" placeholder="请陈述您遇到的问题..." placeholder-class="ta" maxlength="200" />
			</view>
		
		<view class="verify-box">
			<text class="verify-button" @click="submitQuestion('QSPopup')">确认</text>
		</view>
		
		<!-- 显示图层 -->
		<QSPopup ref="QSPopup">
			<view class="content qs-popup" style="height: 410rpx;width: 660rpx;background-color: white;border-radius: 20rpx;">
				<view class="cp-qt-title">
					投诉成功，我们将第一时间 受理您的举报信息！
				</view>
				<view class="finish-box">
					<text class="finish-button" @click="hidden('QSPopup')">完成</text>
				</view>
			</view>
		</QSPopup>
	</view>
</template>

<script>
	import QSPopup from '../../components/QS-popup/QS-popup.vue';
	export default {
		data() {
			return {
				questionText: '',
				content: '',
				orderInfo:{},
			}
		},
		onLoad(id) {
			let orId = JSON.parse(id.id)
			this.evaluation(orId)
		},
		components:{QSPopup},
		methods: {
			async evaluation(orId){
				let res = await this.$http.evaluationOrder({
					order_id: orId
				});
				console.log(res)
				this.orderInfo = res.data
				console.log(this.orderInfo)
			},
			
			// 隐藏图层，点击已完成
			hidden(ref) {
				this.$refs[ref].hide()
				uni.navigateBack()
			},
			changeText(e){
				this.content = e.detail.value
			},
			// 提交投诉
			submitQuestion(ref) {
				let qtLength = this.questionText.trim().length
				if(qtLength < 10 ){
					uni.showToast({
						title: '请至少输入10个字',
						icon: 'none'
					});
				} else{
					this.commitBusiness(ref)
				}
			},
			async commitBusiness(ref){
				let res = await this.$http.complaintBusiness({
					user_content:this.content,
					order_id: this.orderInfo.orid
				});
				console.log(res)
				if(res.code == 200){
					this.$refs[ref].show();
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/user-order.scss';
	@import 'static/css/smallCommon.scss';

	.line1-text1{
		padding: 15upx 0;
	}
	.line1-text2{
		padding: 0 15upx;
	}
	.od-line2 .line2-active:after {
		left: 100upx;
	}

	.od-line3 .content-line3 {
		height: 110upx;
		line-height: 110upx;
	}

	.od-line3 .content-line3 .line3-l {
		line-height: 110upx;
	}
	
	
</style>
